<template>
  <div class="classdetail-wrap">
    <div v-title style="display: none">班别详情</div>
    <img :src="'http://cj.lightway.cc/media/'+img" alt="">
    <div class="classinfo">
      <div v-for="item in descript">
       <p v-for="(text,i) in item" >{{text}}</p>
      </div>
    </div>
    <div class="carchose-wrap">
      <p class="car-title">{{title}}</p>
      <div class="carchose">
        <div class="carchose-item">
          <div v-for="(item,index) in car">
            <input :id="item['id']" type="radio" :value="index" name="price" v-model="carindex">
            <label :for="item['id']" @click="scrolltodown">{{item['name']}}</label>
          </div>
        </div>
      </div>
      <p class="car-price">价格：{{price + '.00'}}</p>
    </div>
    <div class="save-order">
      <button @click="toOrder">立即报名</button>
    </div>
    <notification notification="请先进行车型选择!" title="注意" isWithdraw="" v-show="tooltip" v-on:gettooltip="showtooltip"></notification>
  </div>
</template>
<script type="text/ecmascript-6">
  import notification from 'components/notification/notification';
  const ERR_OK = 1;
  export default {
    props: {
    },
    data() {
      return {
        price: '0',
        img: null,
        descript: null,
        title: null,
        car: null,
        id: '',
        tooltip: '',
        carindex: ''
      };
    },
    watch: {
      carindex: function(newdata, olddata) {
        this.price = this.car[newdata].price;
      }
    },
    created() {
      let id = this.$route.params.id;
      this.$http.get('api/opera/course/detail/?school_id=' + id + '&id=' + id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          let classdetail = response.data[0];
          this.img = classdetail.banner;
          this.descript = classdetail.descript;
          this.title = classdetail.choseCar.title;
          this.car = classdetail.choseCar.car;
        }
      });
    },
    methods: {
      scrolltodown() {
        document.getElementsByTagName('body')[0].scrollTop = document.getElementsByTagName('body')[0].scrollHeight;
      },
      toOrder() {
        if (this.carindex === '') {
          this.tooltip = 'true';
        } else {
          this.$router.push({path: '/order/' + this.car[this.carindex].id});
        }
      },
      showtooltip(msg) {
        this.tooltip = msg.tooltip;
      }
    },
    components: {
      notification
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl" 
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰白 bg 
  主题 红 theme
  辅助 蓝 assist
  背景 白 bg-white */
  .classdetail-wrap
    .confirm
      width: 150px
      height: 50px
    img
      width: 100%
      height: auto
    .classinfo
      background-color: $bg-white
      padding: 12px
      margin-top: 10px
      div:first-child
        margin-bottom: 10px
      p
        font-size: 15px
        line-height: 15px
        margin: 0px 4px 8px 18px
        margin-top: 4px
        color: $se-fn
        text-align: left
      div>p:first-child
        height: 20px
        line-height: 20px
        padding-left: 5px
        font-size: 16px
        margin-left: 0
        border-left: 5px solid $theme
        color: $theme
    .carchose-wrap
      margin-top: 10px
      margin-bottom: 53px
      background-color: $bg-white
      padding: 12px 12px 0px 12px
      .car-title
        height: 20px
        line-height: 20px
        padding-left: 5px
        font-size: 16px
        margin-left: 0
        border-left: 5px solid $theme
        color: $theme
      .carchose
        border-1px($border)
        .carchose-item div
          display inline-block
        label
          display inline-block
          height: 30px
          line-height: 30px
          margin: 13px 0px 13px 10px 
          padding: 0 14px
          font-size: 15px
          background-color: $bg-white
          color: $se-fn
          border: 1px solid $se-fn
          border-radius: 3px
        input:checked+label
          border 1px solid $theme
          color $theme
        input[type="radio"]
          display: none
      .car-price
        height: 30px
        line-height: 30px
        text-align: right
        font-size: 15px
        color: $main-fn
    .save-order 
      position fixed  
      bottom 0px 
      width 100%
      padding 4px 
      box-sizing border-box
      button
        width 100%
        height 43px
        border-radius 4px
        font-size 16px
        line-height 43px
        background-color $theme
        color $bg-white
        display block
        border none 
</style>
